<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card class="card-box">
            <div class="card-title"><h3>付费人数</h3></div>
            <div class="card-content">
              <span
                >累计<b class="stronger">{{ flowstat.totalPayCount }}</b
                >人</span
              ><span
                >今日 <b class="stronger">{{ flowstat.todayPayCount }}</b
                >人</span
              >
            </div>
          </el-card>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-card class="card-box">
            <div class="card-title"><h3>付款金额</h3></div>
            <div class="card-content">
              <span
                >累计<b class="stronger">{{
                  flowstat.totalPayAmount | price
                }}</b
                >元</span
              ><span
                >今日<b class="stronger">{{
                  flowstat.todayPayAmount | price
                }}</b
                >元</span
              >
            </div>
          </el-card>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-card class="card-box">
            <div class="card-title"><h3>返现金额</h3></div>
            <div class="card-content">
              <span
                >累计<b class="stronger">{{
                  flowstat.totalReturnAmount | price
                }}</b
                >元</span
              ><span
                >今日<b class="stronger">{{
                  flowstat.todayReturnAmount | price
                }}</b
                >元</span
              >
            </div>
          </el-card>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-card class="card-box">
            <div class="card-title"><h3>实际收益</h3></div>
            <div class="card-content">
              <span
                >累计<b class="stronger">{{
                  (flowstat.totalPayAmount - flowstat.totalReturnAmount) | price
                }}</b
                >元</span
              ><span
                >今日<b class="stronger">{{ flowstat.todayEarnings | price }}</b
                >元</span
              >
            </div>
          </el-card>
        </div></el-col
      >
    </el-row>
    <el-col class="search-content" :span="22">
      <label for="invation_person">邀请人:</label>
      <el-input
        v-model="invation_person"
        class="search_key"
        label="invation_person"
        placeholder="请输入邀请人信息"
        clearable
        size="large"
        maxlength="10"
        show-word-limit
      />
      <label>交易状态:</label>
      <el-select v-model="status" class="search_key" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button
        class="search-button"
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="searchData"
        >搜索</el-button
      >
    </el-col>
    <el-col :span="2">
      <div class="exportData">
        <el-button class="exportButton" type="primary" @click="exportExcel"
          >导出表格</el-button
        >
      </div>
    </el-col>
    <div class="table">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column label="下单编号" width="200">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.payTradeno | order
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="购买用户">
          <template slot-scope="scope">
            <div class="avater-name">
              <el-avatar size="small" :src="scope.row.headimgurl"></el-avatar>
              <span style="margin-left: 10px">{{ scope.row.nickname }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="返现金额" width="100" prop="royalty">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.returnAmount | price
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="邀请人">
          <template slot-scope="scope">
            <div class="avater-name">
              <el-avatar
                size="small"
                :src="scope.row.fromHeadimgurl"
              ></el-avatar>
              <span style="margin-left: 10px">{{
                scope.row.fromNickname
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="交易状态" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.pay | status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建订单时间" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.createDate | timeFilter
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="交易时间" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.payDate | timeFilter
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付金额" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.payAmount | price
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分销返现" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.returnAmount | price
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="返现状态" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.returnPayoff | paystatus
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class=" pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getStaflow, getIncomeList, exportData } from "../api/statflow";
import { sheet2blob, csv2sheet, openDownloadDialog } from "../utils/excel";
import XLSX from "xlsx";
export default {
  name: "Income",
  data() {
    return {
      flowstat: {},
      tableData: [],
      total: 0,
      pageSize: 10,
      invation_person: "",
      status: "9",
      options: [{
          value: "9",
          label: "全部"
        },
        {
          value: '1',
          label: '已支付'
        },
        {
          value: '0',
          label: '待支付'
        }
      ],
    };
  },
  filters: {
    order: function(order) {
      return order === "0" ? "-" : order;
    },
    status: function(status) {
      return status === true ? "已完成" : "待支付";
    },
    price: (price) => {
      return price / 100;
    },
    paystatus: (status) => {
      return status === 1 ? "已结算" : "-";
    },
  },
  methods: {
    getStaflow(gid) {
      getStaflow(gid).then((v) => {
        const data = JSON.parse(v.data);
        this.flowstat = data.respMsg.flowstat;
      });
    },
    getIncomeList(pageNum, gid, pageSize, fromNickname, status) {
      getIncomeList(pageNum, gid, pageSize, fromNickname, status).then((v) => {
        const data = JSON.parse(v.data);
        this.tableData = data.respMsg.list;
        console.log(data);
        this.total = data.respMsg.pagInfo.total;
      });
    },
    handleCurrentChange(val) {
      this.getIncomeList(
        val,
        this.$route.params.id,
        this.pageSize,
        this.invation_person,
        this.status
      );
    },
    handleSizeChange(val) {
      console.log(val);
      this.pageSize = val;
      this.getIncomeList(
        1,
        this.$route.params.id,
        this.pageSize,
        this.invation_person,
        this.status
      );
    },
    exportExcel() {
      exportData(this.$route.params.id).then((v) => {
        const data = new Uint8Array(v.data);
        const workbook = XLSX.read(data, { type: "array" });
        const sheetNames = workbook.SheetNames;
        const csv = XLSX.utils.sheet_to_csv(workbook.Sheets[sheetNames[0]]);
        const sheet = csv2sheet(csv);
        const blob = sheet2blob(sheet);
        openDownloadDialog(blob, "export.xlsx");
      });
    },
    searchData() {
      this.getIncomeList(
        1,
        this.$route.params.id,
        this.pageSize,
        this.invation_person,
        this.status
      );
    }
  },

  created() {
    this.getStaflow(this.$route.params.id);
    this.getIncomeList(1, this.$route.params.id, this.pageSize);
  },
};
</script>

<style scoped>
.card-title {
  float: left;
  margin-left: 10px;
  margin-bottom: 10px;
  font-size: 1.2em;
}
.table {
  margin-top: 30px;
}
.pagination {
  float: right;
  margin-top: 30px;
  margin-right: 50px;
  margin-bottom: 0px;
}
.card-content {
  width: 80%;
  display: inline-flex;
  justify-content: space-between;
}
.stronger {
  font-size: 1.5em;
  color: #409eff;
  margin: 0 2px;
}
.exportData {
  margin-top: 20px;
  /* margin-bottom: 20px; */
  overflow: hidden;
}
.exportButton {
  float: right;
  margin-right: 60px;
}
.search-content{
  margin-top:20px ;
  margin-bottom:20px ;
}
.icon-update{
  font-size: 1.2em;
  margin-left: 6px;
}
.search_key{
  display: inline;
  float: left;
  margin-left: 25px;
  margin-right: 25px;
  width: 18%;
}
label{
  float: left;
  line-height: 2.4rem;
}
.search-button{
  float: left;
  margin-top: 3px;
}
</style>
